<template>
  <div style="padding:10px;">
    <div class="menu-item-group">
      <div v-for="selectItem in selectItems" :key="selectItem.title">
        <div class="menu-item-label">{{selectItem.title}}</div>
        <el-menu router class="el-menu-vertical-demo">
          <el-menu-item
            :class="[activeRoute.indexOf(item.path) != -1?'active':'']"
            v-for="item in selectItem.subItems"
            :key="item.path"
            :index="item.path"
          >
            <span slot="title">{{item.label}}</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="setting-item-group">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Setting",
  components: {},
  props: {},
  data() {
    return {
      activeRoute: "/setting/profile",
      selectItems: [
        {
          title: "通用设置",
          subItems: [
            {
              path: "/setting/profile",
              label: "个人信息"
            },
            {
              path: "announcement",
              label: "通知公告"
            }
          ]
        },
        {
          title: "团队设置",
          subItems: [
            {
              path: "enterprise-info",
              label: "企业信息"
            },
            {
              path: "cs-management",
              label: "客服管理"
            },
            {
              path: "group-management",
              label: "分组管理"
            },
            {
              path: "role-management",
              label: "角色管理"
            }
          ]
        },
        {
          title: "客服设置",
          subItems: [
            {
              path: "common-word",
              label: "常用语"
            },
            {
              path: "auto-reply",
              label: "自动回复"
            },
            {
              path: "dialog-rule",
              label: "对话规则"
            },
            {
              path: "distribution-rule",
              label: "分配规则"
            },
            {
              path: "session-comment",
              label: "会话评价"
            },
            {
              path: "customer-info",
              label: "客户信息"
            },
            {
              path: "customer-tag",
              label: "客户标签"
            },
            {
              path: "blacklist",
              label: "黑名单"
            }
          ]
        },
        {
          title: "工单设置",
          subItems: [
            {
              path: "basic-setting",
              label: "基础设置"
            },
            {
              path: "order-classification",
              label: "工单分类"
            }
          ]
        },
        {
          title: "全局设置",
          subItems: [
            {
              path: "operation-log",
              label: "操作日志"
            },
            {
              path: "message-notification",
              label: "消息通知"
            }
          ]
        }
      ]
    };
  },
  watch: {
    $route() {
      this.setRoute();
    }
  },
  computed: {},
  methods: {
    setRoute() {
      this.activeRoute = this.$route.path;
    }
  },
  created() {
    this.setRoute();
  },
  mounted() {}
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 250px;
}
.menu-item-label {
  width: 230px;
  background-color: #fff;
  height: 50px;
  color: #acacac;
  padding-left: 20px;
  line-height: 50px;
}
.menu-item-group {
  position: fixed;
  left: 75px;
  top: 75px;
  height: 88vh;
  overflow: auto;
}
.setting-item-group {
  margin-left: 270px;
  margin-top: 5px;
}
.active {
  background-color: #e6f1ff !important;
  color: #0166ed;
  border-left: 4px solid #006eff;
}
</style>
